#spread-page{
  // background: -webkit-linear-gradient(#f10c0c,#f44040);
  // background: linear-gradient(#f10c0c,#f44040);
  // background-color: #f44040;  
  background: white;
  // color: white;
  .banner{
    position: relative;
    .logo{
      position: absolute;
      top: 0.5rem;
      left: 0.5rem;
    }
  }
  .presents{
    // width: 90%;
    padding: 0 10px 10px;
    margin: 0 auto;
    border-radius: 0.2rem;
    border: 1px solid $unlock;
    h3{
      color: $unlock;
    }
    .present{
      display: block;
      margin-bottom: 10px;
      border: 1px solid $unlock;
      height: 80px;
    }
    @media (min-width: 320px) {
      .present{
        height: 80px;
      }
    }
    @media (min-width: 375px) {
      .present{
        height: 96px;
      }
    }
    @media (min-width: 414px) {
      .present{
        height: 112px;
      }
    }
  }
  .codes{
  	width: 90%;
  	margin: 0 auto;
  	padding-top: 1rem;
  	.signup_group{
  		margin: 0 auto;
      text-align: left;
  		.signup_item{
  			background: white;
  			border: none;
  			border-radius: 1rem;
  			margin-bottom: 1rem;
  			position: relative;
  			.input_code{
          text-align: center;
  				color: $dark;
  				width: 100%;
  				border-radius: 1rem;
  				display: block;
  				padding: 0.8rem  0 0.8rem 0.4rem;
  				border: 1px solid $unlock;
  				outline: none;
  			}
  		}
      .send_vcode{
        text-align: center;
        color: white;
        padding: 0.6rem;
        // font-size: 0.8rem;
        background: $unlock;
      }
  	}
  }
  .do_signup{
  	border: none;
  	outline: none;
  	width: 100%;
  	margin: 0 auto;
  	border-radius: 1rem;
  	display: block;
  	padding: 0.5rem 0;
  	color: #fff;
  	font-size: 0.8rem;
  	background: $unlock;
  }
  .do_signup.disabled{
  	background: #c0c0c0;
  	color: white;
  }
}

.popup-protocal{
	.close{
		padding: 0 0.6rem;
		span{
			padding-left: 1rem;
			font-size: 1rem;
		}
	}
}

#activity-unlock-page{
  .img_margin_zero{
    font-size: 0;
  }
  .btn{
    border: none !important;
  }
  a{
    color: white !important;
    text-decoration: none !important; 
  }
  .suffix{
    font-size: 0.5rem;
  }

  .activity_rule{
    text-align: left;
    list-style: none;
    .icon{
      margin-right: 5px;
    }
    .notes{
      font-size: 0.6rem;
      color: $text-grey;
    }
    .spread-progress{
      .dot, .blink{
        display: inline-block;
      }
      .dot{
        width: 20px;
        height: 20px;
        background: $text-grey;
        color: white;
        border-radius: 50%;
        text-align: center;
        line-height: 20px;
      }
      .blink{
        height: 0.3rem;
        width: 20%;
        background: $text-grey;
      }
      .dot.active, .blink.active{
        background-color: #0894ec;
      }
    }
  }
  .button-receive{
    border: none;
    width: 40%;
    margin: 0 auto;
    height: 2rem;
    background: $unlock;
    color: white;
    // border-radius: 1.25rem;
  }
  .button-receive[disabled]{
    background: $text-grey;
  }
}
.Gorecord{
  width: 4.6rem;
  z-index: 10;
  position: fixed;
  top: 4rem;
  right: 0;
}
#record-page{
  // background: #faedc0;
  .back{
    font-size: 0.8rem;
    color: grey;
    padding: 0.6rem 0.4rem;
  }
  .suffix{
    font-size: 0.5rem;
  }
  .title_reward{
    font-size: 0.8rem;
    // color: #faedc0;
    text-align: center;
    width: 85%;
    margin: 0 auto;
    padding: 0.1rem 0 0.6rem 0;
    // background: url('../img/unlock/title.png') top center no-repeat;
    background-size: 80%;
  }
  .list{
    .item{
      background: white;
      .row{
        padding: 0.4rem 0;
        .present_sent_infomation{
          position: relative;
          .kefu{
            margin: 0.3rem 0;
          }
          .finish{
            position: absolute;
            top: 50%;
            right: 5%;
            z-index: 100;
            transform: translate(-5%, -50%);
          }
        }
      }
      .flag{
        height: 10px;
        background: url(../img/unlock/red-reward.png) repeat-x;
        background-size: 5%;
      }
    }
    .item.sented{
      color: grey;
      -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      -webkit-filter: grayscale(1);
      filter: grayscale(100%);
      filter: grayscale(1);
      filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    }
  }
}

#accumulate-points-page{
  .integral-left{
    padding: 5px 0 5px 10px;
  }
  .tab-type{
    padding: 5px 0;
    .tab-type-item{
      background: #f1f1f1;
      display: inline-block;
      width: 96%;
      padding: 4px 0;
      color: $text-grey;
      border: 1px solid transparent;
    }
    .tab-type-item.active{
      background: #fdfdfd;
      color: $dark;
      border-color: $line-grey;
    }
  }
  .rank-change{
    .rank-type{
      width: 96%;
      color: $red;
      font-size: 0.8em;
      border-radius: 2rem;
      border: 1px dashed $red;
    }
  }
  .present-list{
    .present-item{
      @extend .flex-center-y;
      .img_url{
        width: 100%;
        padding: 50% 0;
      }
      .button-cost{
        background: $red;
        color: white;
        border: none;
      }
    }

    .present-item:last-child{
      border: none;
    }
  }

  .rule{
    padding: 0 0.6rem;
    color: $text-grey;
    span{
      color: $dark;
      font-size: 0.8rem;
    }
  }
  .rule-tip{
    padding: 0 0.6rem;
    font-size: 0.6rem;
    color: $text-grey;
  }
  .contact-us{
    color: $dark;
    display: block;
    margin-top: 0.8rem;
  }
  
  .button-address{
    background: $red;
    color: white;
    box-shadow: 0 2px 0 0 #c5452a;
    border: none;
    margin: 0 auto;
  }
}

#activity-liuyue-page{
  .activities{
    background: url('https://ol4ttnc5a.qnssl.com/image/1/31496907739') center top repeat-y;
    background-size: 100%;
    .activity_list{
      background: white;
      width: 94%;
      margin-bottom: 20px;
      padding: 5px;
      border-radius: 10px;
      .activity_content{
        @extend .flex-center;
        .thumbnail{
          width: 32%;
          text-align: center;
          img{
            width: 80%;
          }
        }
        .infos{
          width: 68%;
          .info-title{
            // margin: 0 0 15px;
          }
          .notes{
            font-size: 0.6rem;
            color: $text-grey;
          }
        }
      }
    }
  }
  .activity_content{
    .activity_rule{
      background: url(https://ol4ttnc5a.qnssl.com/image/1/91496930882) center no-repeat;
      background-size: 100% 100%;
      text-align: left;
      display: inline-block;
      list-style: none;
      margin: 0;
      padding: 5px;
      .icon{
        margin-right: 5px;
      }
      li{
        margin-bottom: 4px;
        font-size: 0.6rem;
      }
    }
    .button-receive{
      width: 38%;
      outline: none;
      border: none;
      background: $red;
      height: 1.2rem;
      display: inline-block;
      line-height: 1.2rem;
      color: white !important;
    }
    .button-receive[disabled]{
      background-color: $text-grey;
      color: $text-grey;
    }
  }
  .activity_rules{
    background: url(https://ol4ttnc5a.qnssl.com/image/1/51496905848) center bottom no-repeat;
    background-size: 100%;
  }
}

#record-liuyue-page{
  @extend #record-page;
}


